import React from 'react';
import { Form, Modal, Radio } from 'antd';
import { formatMessage } from 'umi-plugin-react/locale';

class SortModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      sortCondition: 'createTime',
      sortType: 0,
    };
  }

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  initModal = () => {
    this.setState({
      visible: true,
    });
    this.props.form.setFieldsValue({
      sortCondition: this.state.sortCondition,
      sortType: this.state.sortType,
    });
  };

  cancelModal = () => {
    this.props.form.resetFields();
    this.setState({
      visible: false,
    });
  };

  doOk = () => {
    this.props.form.validateFields((error, values) => {
      if (!error) {
        this.doSort(values);
      }
    });
  };

  doSort = (values) => {
    this.setState({
      visible: false,
      sortCondition: values.sortCondition,
      sortType: values.sortType,
    });
    this.props.sort(values);
  };

  render() {
    const { visible } = this.state;
    const {
      form: { getFieldDecorator },
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    return (
      <Modal
        title={formatMessage({ id: 'knowledgeFile.sortModal.title' })}
        visible={visible}
        onCancel={this.cancelModal}
        onOk={this.doOk}
        width={800}
      >
        <Form {...formItemLayout}>
          <Form.Item
            label={formatMessage({ id: 'systemKnowledgeBase.sortCondition' })}
            style={{ display: 'flex', alignItems: 'center' }}
          >
            {getFieldDecorator('sortCondition', {
              rules: [
                {
                  required: true,
                  message: formatMessage({
                    id: 'systemKnowledgeBase.pleaseSelectSortCondition',
                  }),
                },
              ],
            })(
              <Radio.Group>
                <Radio value={'createTime'}>
                  {formatMessage({ id: 'systemKnowledgeBase.creationTime' })}
                </Radio>
                <Radio value={'updateTime'}>
                  {formatMessage({
                    id: 'systemKnowledgeBase.modificationTime',
                  })}
                </Radio>
                <Radio value={'name'}>
                  {formatMessage({ id: 'knowledgeFile.addLibrary.name' })}
                </Radio>
                <Radio value={'permissionType'}>
                  {formatMessage({ id: 'knowledgeFile.addLibrary.visibility' })}
                </Radio>
              </Radio.Group>
            )}
          </Form.Item>
          <Form.Item
            label={formatMessage({ id: 'systemKnowledgeBase.orderSelection' })}
            style={{ display: 'flex', alignItems: 'center' }}
          >
            {getFieldDecorator('sortType', {
              rules: [
                {
                  required: true,
                  message: formatMessage({
                    id: 'systemKnowledgeBase.pleaseSelectSortCondition',
                  }),
                },
              ],
            })(
              <Radio.Group>
                <Radio value={0}>
                  {formatMessage({ id: 'systemKnowledgeBase.descendingOrder' })}
                </Radio>
                <Radio value={1}>
                  {formatMessage({ id: 'systemKnowledgeBase.ascendingOrder' })}
                </Radio>
              </Radio.Group>
            )}
          </Form.Item>
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(SortModal);
